<template>
  <div>
    <el-dialog
      :model-value="visible"
      title="选择商品"
      width="800"
      :close-on-click-modal="false"
      @close="cls"
    >
      <!-- 工具栏 -->
      <div>
        <el-button type="primary" size="small" @click="save">保存</el-button>
        <el-button type="primary" size="small" @click="cls">取消</el-button>
      </div>
      <el-row>
        <!-- 类别树 -->
        <el-col :span="6">
          <el-tree
            style="max-width: 600px"
            :data="tree"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :span="18">
          <el-table
            :data="tableData"
            style="width: 100%"
            header-algin="center"
            stripe
            border
            ref="tableDataRef"
          >
            <el-table-column type="selection" width="30" />
            <el-table-column prop="code" label="商品编号" width="100" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="spec" label="规格型号" width="100" />
            <el-table-column prop="unit" label="单位" width="100" />
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-pagination
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        small="small"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="SizeChange"
        @current-change="CurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryGoods, queryTree } from "@/api/platform/goods.js";
import { ElMessage } from 'element-plus'
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//定义事件
const emits = defineEmits(["close", "choose"])

//分页数据
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tree = ref([]);

//表格同名引用
const tableDataRef=ref(null)

//表格数据
const tableData = ref("");

//选中类别编码
const categoryCode = ref('')

//分页大小改变函数
let SizeChange = ps => {
  pageSize.value = ps;
  page.value = 1;
  init();
};

//页数改变函数
let CurrentChange = ch => {
  page.value = ch;
  init();
};

//定义树配置
const defaultProps = {
  children: "children",
  label: "name"
};

//保存
function save() {
  let data = tableDataRef.value.getSelectionRows();
  if (data.length == 0) {
       ElMessage({
    message: '请选择商品!',
    type: 'warning',
       })
    return;
  }

  emits("choose",data);
  cls();
}

//关闭
function cls(){
emits("close")
}

//类别树点击事件
let handleNodeClick = (row => {
categoryCode.value=row.code
init()
})
//查询商品树
async function initTree() {
  let res = await queryTree();
  if (res.code == 200) {
    tree.value = res.data;
  }
}

//初始函数
async function init() {

  //查询参数
  const data = {
    code: "",
    categoryCode: categoryCode.value,
    name: "",
    page: page.value,
    pageSize: pageSize.value
  };
  let res = await queryGoods(data);
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value = res.data.total;
  }
}
//生命周期函数
onMounted(() => {
  initTree()  ;
  init()
});
</script>

<style scoped></style>
<style scoped></style>
